<div>
  <form nz-form [formGroup]="validateForm" class="form-area">
    <div nz-row>
      <div nz-col nzSpan="8">
        <nz-form-item>
          <nz-form-label [nzSm]="5" [nzXs]="24" nzFor="name">角色名称</nz-form-label>
          <nz-form-control [nzSm]="16" [nzXs]="24" >
            <input nz-input formControlName="name" id="name" />
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col nzSpan="8">
        <nz-form-item>
          <nz-form-label [nzSm]="5" [nzXs]="24" nzFor="status">状态</nz-form-label>
          <nz-form-control [nzSm]="16" [nzXs]="24">
            <input nz-input formControlName="status" id="status" />
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col nzSpan="8" class="btn-action">
        <nz-form-item class="btn-item">
          <nz-space>
            <button *nzSpaceItem nz-button nzType="default" (click)="handleRest()">重置</button>
            <button *nzSpaceItem nz-button nzType="primary" (click)="handleSearch()">查询</button>
          </nz-space>
        </nz-form-item>
      </div>
    </div>
  </form>
  <nz-table #basicTable [nzData]="listOfData" [nzTitle]="titleTemplate" nzShowPagination nzShowSizeChanger nzShowQuickJumper>
    <thead>
      <tr>
        <th>Name</th>
        <th>Status</th>
        <th>Note</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let data of basicTable.data">
        <td>{{ data.name }}</td>
        <td>
          <nz-switch formControlName="status" id="status" [ngModel]="data.status" nzCheckedChildren="已启用" nzUnCheckedChildren="已禁用"></nz-switch>
        </td>
        <td>{{ data.note }}</td>
        <td class="action">
          <a (click)="handleOpen.handleOpen(data)">编辑</a>
          <nz-divider nzType="vertical"></nz-divider>
          <a
            nz-popconfirm
            nzPopconfirmTitle="Are you sure delete this task?"
            nzPopconfirmPlacement="bottom"
            (nzOnConfirm)="confirm(data.key)"
            (nzOnCancel)="cancel()"
            class="delete"
          >删除</a>
        </td>
      </tr>
    </tbody>
  </nz-table>
  <ng-template #titleTemplate>
    <div class="table-header">
      <span>角色列表</span>
      <button nz-button nzType="primary" (click)="handleOpen.handleOpen()" class="add-btn">
        <i nz-icon nzType="plus"></i> 新增角色
      </button>
    </div>
  </ng-template>
  <app-role-modal #handleOpen></app-role-modal>
</div>